import React, { Component } from 'react';
import "../../styles/Home.scss"
import { SearchBar, Swiper, } from 'antd-mobile'
import * as service from "../../api/index"
import CountDown from "../CountDown"

import pic1 from "../../assets/1.png"
import pic2 from "../../assets/2.png"
import pic3 from "../../assets/3.png"
import pic4 from "../../assets/4.png"
import pic5 from "../../assets/5.png"
import pic6 from "../../assets/6.png"
import pic7 from "../../assets/7.png"
import pic8 from "../../assets/8.png"
import pic9 from "../../assets/9.png"
import pic10 from "../../assets/10.png"


class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            swiper: [],
            token: localStorage.getItem('token'),
            one: [
                { pic: pic1, text: "嗨购超市" },
                { pic: pic2, text: "数码电器" },
                { pic: pic3, text: "嗨购服饰" },
                { pic: pic4, text: "嗨购生鲜" },
                { pic: pic5, text: "嗨购到家" },
                { pic: pic6, text: "嗨购缴费" },
                { pic: pic7, text: "9.9元拼" },
                { pic: pic8, text: "领券" },
                { pic: pic9, text: "领金贴" },
                { pic: pic10, text: "plus会员" },
            ],
            miao: [],
            shop: [],
            num: 1,//页数
            time: new Date()

        };

    }

    async componentDidMount() {
        //轮播图
        const res = await service.banner_list()
        // console.log(res.data.data);
        this.setState({ swiper: res.data.data })

        //秒杀
        const res2 = await service.miaosha()
        // console.log(res2.data.data);
        this.setState({ miao: res2.data.data })

        //商品第一页
        const res3 = await service.pro_list()
        // console.log(res3.data.data);
        this.setState({ shop: res3.data.data })

    }

    componentDidUpdate() {
        window.onscroll = () => {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            if (scrollTop + windowHeight + 1 >= scrollHeight) {
                //写后台加载数据的函数
                this.state.num = this.state.num + 1
                service.pro_list({ count: this.state.num, limitNum: 12 }).then((res) => {
                    this.state.shop = [...this.state.shop, ...res.data.data]
                    this.setState({ shop: this.state.shop })
                })
            }
        }
    }

    shop_id(id) {
        console.log(id);
        this.props.history.push({ pathname: '/detail', state: { proid: id } })
    }



    render() {
        return (

            <div className='home'>
                <div className="search">
                   
                    <ul>
                        <li onClick={() => { this.props.history.push('/city') }}>{this.props.history.location.state ? this.props.history.location.state.name : '西安'}</li>
                        <li className='sou' onClick={() => {
                            this.props.history.push('/search')
                        }}><SearchBar placeholder='请输入内容' /></li>
                       
                           
                            
                            
                                <li onClick={() => { this.props.history.push('/login') }}>登录</li>
                               
                             
                    </ul>
                </div>
                <div className="context">
                    <div className="swiper">
                        <Swiper autoplay loop>
                            {
                                this.state.swiper.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <div className="tu">
                                                <img src={item.img} alt="" />
                                            </div>
                                        </Swiper.Item>
                                    )
                                })}
                        </Swiper>
                    </div>
                    <div className="remen">
                        {
                            this.state.one.map((item, index) => {
                                return (
                                    <div className="box" key={index}>
                                        <img src={item.pic} alt="" />
                                        <p>{item.text}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="miaosha">
                        <div className="top">
                            <span className='left'>嗨购秒杀 <span className='zhong'>{this.state.time.getHours()}点场</span> &emsp; <CountDown />  </span>
                            <span className='right'>爆款轮番秒</span>
                        </div>
                        <div className="one">
                            {
                                this.state.miao.map((item, index) => {
                                    return (
                                        <div className="box" key={index} onClick={() => { this.shop_id(item.proid) }}>
                                            <img src={item.img1} alt="" />
                                            <p>￥{item.originprice}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>

                    </div>
                    <div className="shangping">
                        {
                            this.state.shop.map((item, index) => {
                                return (
                                    <div className="box" key={index} onClick={() => { this.shop_id(item.proid) }}>
                                        <img src={item.img1} alt="" />
                                        <p>{item.proname}</p>
                                        <span>￥{item.originprice}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;